<template>
  <div>
    <!-- 协议弹窗 -->
    <el-dialog
      v-model="showAgreementDialog"
      title="湖北省交通运输厅数据共享交换系统开放门户数据使用协议"
      width="800px"
      :before-close="handleCloseAgreement"
      :show-close="false"
    >
      <div class="agreement-content">
        <h3>一、平台使用条款</h3>
        <p
          >使用湖北省交通运输厅数据共享交换系统开放门户（以下简称本平台）前，请认真阅读本协议。使用本平台您必须完全接受本协议中所包含的条款、条件和平台即时刊登的通告，并且遵守中华人民共和国关于互联网的相关法律、规定与规则。</p
        >
        <p
          >本平台有权不经提前通知随时修改本协议。本协议一经变动，将在相关页面提示修改内容；用户如果不同意本协议的修改，可以放弃访问或使用本平台提供的任何数据、产品和服务；如果用户在协议变动后继续访问或使用本平台，则视为已经接受协议的变动。</p
        >

        <h3>二、用户接受条款</h3>
        <p>（一）遵守中华人民共和国关于互联网、信息和数据等相关的法律、法规和规章。</p>
        <p>（二）遵守所有与网络服务有关的网络协议、规定和程序。</p>
        <p>（三）禁止对本平台进行技术性破坏，不得干扰或妨害本平台提供正常的互联网服务。</p>
        <p>（四）不得利用本平台进行任何可能对互联网的正常运转造成不利影响的行为。</p>
        <p>（五）不得为任何非法目的而使用、利用本平台。</p>
        <p>（六）不得利用本平台散布广告以及其它商业化的宣传。</p>
        <p
          >（七）不得利用本平台发布或传输任何骚扰性的、中伤他人的、辱骂性的、恐吓性的、庸俗淫秽的或其他任何非法的、可能产生不良后果的信息资料，不得发布任何包含种族、性别、宗教有歧视性和攻击性的信息内容。</p
        >
        <p
          >（八）用户对于本平台的通知应当通过本平台对外正式公布的通信地址、电子邮件地址等联系信息进行送达。</p
        >

        <h3>三、用户权利和义务</h3>
        <p
          >（一）现阶段，用户有权免费获取本平台所提供的所有政务数据资源，享有数据资源的非排他使用权。用户不得有偿转让在本平台中获取的各种数据资源。</p
        >
        <p
          >（二）用户基于本平台数据资源进行开发利用时，应清楚地表明所做的任何数据分析或应用是个人或公司的行为，不能歪曲篡改从本平台获取的公共数据资源。</p
        >
        <p
          >（三）用户应当遵守中华人民共和国有关互联网管理的相关法律法规和规章，以及所有与本平台网络服务有关的网络协议、规定和程序。禁止对本平台进行技术性破坏，不得干扰或妨害数据开放平台提供正常的互联网服务。用户发现任何非法使用用户账号或安全漏洞的情况，应当立即告知本平台运营管理方。</p
        >
        <p
          >（四）用户在使用本平台数据资源所产生的成果中注明公共数据资源来源为“湖北省交通运输厅数据共享交换系统开放门户”。</p
        >
        <p
          >（五）如果本平台数据服务内容由于法律法规或政策调整等原因从而进行调整，用户应立即在相关应用程序或互联网服务中作相应调整。</p
        >
        <p
          >（六）用户基于本平台数据资源开发的各类应用和服务，应遵守有关法律、法规和规章的规定，不能有任何可能危害国家安全和社会公共利益、侵犯商业秘密和个人隐私或其他不正当的行为。因与第三方产生纠纷或者违反法律法规等造成的后果，由用户自行承担。</p
        >
        <p
          >（七）用户在基于本平台数据资源的应用程序或互联网服务中应清楚地声明:源于平台的相关数据受湖北公共数据开放网相关协议、条款约束。以上义务同样需要得到您的再授权用户同意并认可。</p
        >
        <p
          >（八）用户义务是本许可的重要条件，如未遵守以上要求，则根据本许可授予的权利将自动终止，用户应立即删除相关数据并停止服务。</p
        >

        <h3>四、平台权利及免责声明</h3>
        <p
          >（一）本平台所有数据资源均为公共管理和服务部门在履职过程中采集和获取，由于未采集新数据或其他原因可能造成数据质量波动，及更新推迟或中止。本平台对所提供数据的完整性、准确性、及时性和服务连续性不作任何承诺或担保。</p
        >
        <p
          >（二）用户因使用本平台所提供的数据或服务而造成的任何损失，由用户承担责任。用户应自行判断是否继续使用本平台提供的数据或服务。</p
        >
        <p
          >（三）在任何情况下，本平台有合理理由怀疑用户的行为违反法律、法规、规章以及本协议的，本平台有权在任何时候，随时终止向该用户提供服务。</p
        >
        <p
          >（四）因国家法律法规和政策调整，或因多条数据关联后可能造成隐私泄露及其它原因不宜继续公开的数据，本平台有权随时将其下线，用户不得以任何理由继续保存或使用该数据，否则造成的后果由您自行承担。</p
        >
        <p
          >（五）任何由于黑客攻击、计算机病毒侵入或发作、政府管制而造成的暂时性关闭等影响网络正常经营及其他不可抗力原因而造成的资料泄露、丢失、被盗用或被篡改等，本平台将采取必要措施尽力减少用户的损失，但本平台对此不承担任何责任。</p
        >
        <p
          >（六）本平台不对由于操作或传播的延迟、通讯失败,互联网接入设备的困难，硬件或软件故障而造成的直接或间接损失承担责任。</p
        >
        <p
          >（七）本平台不对任何因使用数据或任何衍生的分析和应用程序而造成的直接或间接损失承担责任。</p
        >
        <p
          >（八）本平台包含到其他平台的链接，这些平台内容和隐私策略可能和我们不同。本平台不对由于这些平台内容和隐私策略造成的后果承担责任。</p
        >

        <h3>五、隐私保护声明</h3>
        <p
          >根据《中华人民共和国数据安全法》《中华人民共和国个人信息保护法》等法律法规，本平台严格限制过度采集和滥用数据，未经用户许可或知情，本平台不会采集用户个人信息。</p
        >
        <p
          >本平台尊重并保护所有平台用户的个人隐私权，未经用户许可或根据相关法律、法规的强制性规定，本平台不会主动地将用户个人信息泄露给任意第三方。</p
        >

        <h3>六、条款说明</h3>
        <p>本协议条款的最终解释权归湖北省交通运输厅所有。</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseAgreement">取消</el-button>
          <el-button type="primary" @click="handleAgree">同意并继续</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 表单弹窗 -->
    <el-dialog
      v-model="showFormDialog"
      title="数据使用申请"
      width="800px"
      :before-close="handleCloseForm"
    >
      <el-form :model="formData" :rules="formRules" ref="formRef" label-width="150px">
        <!-- <el-form-item label="表单类型" prop="applicationType">
          <el-select v-model="formData.applicationType" disabled>
            <el-option label="ETL" value="1" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="申请标题" prop="applicationTitle">
          <el-input v-model="formData.applicationTitle" placeholder="请输入申请标题" />
        </el-form-item>
        <el-form-item label="申请原因" prop="applicationReason">
          <el-input
            v-model="formData.applicationReason"
            type="textarea"
            :rows="3"
            placeholder="请输入申请原因"
          />
        </el-form-item>
        <el-form-item label="应用场景" prop="applicationScenario">
          <el-input
            v-model="formData.applicationScenario"
            type="textarea"
            :rows="2"
            placeholder="请输入数据的应用场景"
          />
        </el-form-item>
        <el-form-item label="使用时间" prop="useTime">
          <el-date-picker
            v-model="formData.useTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model="formData.contactPhone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="联系地址" prop="contactAddress">
          <el-input v-model="formData.contactAddress" placeholder="请输入联系地址" />
        </el-form-item>
        <el-form-item label="服务范围" prop="serviceScope">
          <el-input
            v-model="formData.serviceScope"
            type="textarea"
            :rows="2"
            placeholder="基于开发数据开发的应用上线之后的用户群体以及对应的服务范围"
          />
        </el-form-item>
        <el-form-item label="预期成效" prop="expectedEffect">
          <el-input
            v-model="formData.expectedEffect"
            type="textarea"
            :rows="2"
            placeholder="基于开放数据开发的应用上线之后的社会效益、经济效益"
          />
        </el-form-item>
        <el-form-item label="系统名称" prop="systemName">
          <el-input v-model="formData.systemName" placeholder="使用开放数据的业务系统名称" />
        </el-form-item>
        <el-form-item label="部署地点" prop="deploymentLocation">
          <el-input
            v-model="formData.deploymentLocation"
            placeholder="使用开放数据的业务系统部署地点/机房地址"
          />
        </el-form-item>
        <el-form-item label="系统IP" prop="systemIp">
          <el-input v-model="formData.systemIp" placeholder="使用开放数据的业务系统IP" />
        </el-form-item>
        <el-form-item label="系统URL" prop="systemUrl">
          <el-input v-model="formData.systemUrl" placeholder="使用开放数据的业务系统URL地址" />
        </el-form-item>
        <el-form-item label="等保备案编号" prop="levelProtectionCode">
          <el-input
            v-model="formData.levelProtectionCode"
            placeholder="使用开放数据的业务系统等级保护备案编号"
          />
        </el-form-item>
        <el-form-item label="等保级别" prop="levelProtectionLevel">
          <el-select v-model="formData.levelProtectionLevel" placeholder="请选择等保级别">
            <el-option
              v-for="item in levelProtectionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="承诺书" prop="commitmentFile">
          <UploadFile
            v-model="formData.commitmentFile"
            :file-type="['pdf']"
            :file-size="10"
            :limit="1"
            :is-show-tip="true"
            :typeDownload="'1'"
          />
        </el-form-item>
        <el-form-item label="申请书" prop="applyFile">
          <UploadFile
            v-model="formData.applyFile"
            :file-type="['pdf']"
            :file-size="10"
            :limit="1"
            :is-show-tip="true"
            :typeDownload="'2'"
          />
        </el-form-item>
        <!-- <el-form-item label="调用次数限制" prop="callCountLimit">
          <el-input v-model.number="formData.callCountLimit" placeholder="请输入调用次数限制" />
        </el-form-item>
        <el-form-item label="调用间隔(秒)" prop="callIntervalSeconds">
          <el-input
            v-model.number="formData.callIntervalSeconds"
            placeholder="请输入调用间隔(秒)"
          />
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCloseForm">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交申请</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, onMounted } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import * as portalApi from '@/api/portal'
import UploadFile from '@/components/UploadFile/src/UploadFile.vue'

import { useRoute } from 'vue-router'
const emit = defineEmits(['formSubmitted'])
const route = useRoute()

// 定义DictOption接口
interface DictOption {
  label: string
  value: string
}

// 组件 props
const props = defineProps({
  // 可以传入数据相关信息
  dataInfo: {
    type: Object,
    default: () => ({})
  }
})

// 弹窗控制
const showAgreementDialog = ref(false)
const showFormDialog = ref(false)
const formRef = ref<FormInstance>()
const levelProtectionOptions = ref<DictOption[]>([])

// 表单数据，默认表单类型为3
const formData = reactive({
  applicationType: '3', // 默认ETL类型
  applicationTitle: '',
  applicationReason: '',
  applicationScenario: '',
  useTime: [] as [string, string],
  contactPhone: '',
  contactAddress: '',
  serviceScope: '',
  expectedEffect: '',
  systemName: '',
  deploymentLocation: '',
  systemIp: '',
  systemUrl: '',
  levelProtectionCode: '',
  levelProtectionLevel: '',
  commitmentFile: '', // 承诺书文件
  applyFile: '' // 申请书文件
  // callCountLimit: 0,
  // callIntervalSeconds: 0
})

// 表单验证规则
const formRules: FormRules = {
  applicationType: [{ required: true, message: '请选择表单类型', trigger: 'change' }],
  applicationTitle: [{ required: true, message: '请输入申请标题', trigger: 'blur' }],
  applicationReason: [{ required: true, message: '请输入申请原因', trigger: 'blur' }],
  applicationScenario: [{ required: true, message: '请输入数据的应用场景', trigger: 'blur' }],
  useTime: [{ required: true, message: '请选择使用时间', trigger: 'change' }],
  contactPhone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  contactAddress: [{ required: true, message: '请输入联系地址', trigger: 'blur' }],
  serviceScope: [
    {
      required: true,
      message: '基于开发数据开发的应用上线之后的用户群体以及对应的服务范围',
      trigger: 'blur'
    }
  ],
  expectedEffect: [
    {
      required: true,
      message: '基于开放数据开发的应用上线之后的社会效益、经济效益',
      trigger: 'blur'
    }
  ],
  commitmentFile: [{ required: true, message: '请上传承诺书', trigger: 'change' }],
  applyFile: [{ required: true, message: '请上传申请书', trigger: 'change' }]
  // callCountLimit: [{ required: true, message: '请输入调用次数限制', trigger: 'blur' }],
  // callIntervalSeconds: [{ required: true, message: '请输入调用间隔(秒)', trigger: 'blur' }]
}

// 打开协议弹窗
const openAgreement = () => {
  showAgreementDialog.value = true
}

// 关闭协议弹窗
const handleCloseAgreement = () => {
  showAgreementDialog.value = false
}

// 同意协议并继续
const handleAgree = () => {
  showAgreementDialog.value = false
  showFormDialog.value = true
}

// 关闭表单弹窗
const handleCloseForm = () => {
  showFormDialog.value = false
  // 重置表单
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 获取等保级别字典数据
const getLevelProtectionOptions = async () => {
  try {
    const res = await portalApi.getDictByCode({ dictType: 'protectionLevel' })
    if (res) {
      // 假设返回的数据格式为 { data: [{ label: '一级', value: '一级' }, ...] }
      levelProtectionOptions.value = res || []
    } else {
      console.warn('获取等保级别字典数据失败，使用默认选项')
    }
  } catch (error) {
    console.error('获取等保级别字典数据失败:', error)
    // 失败时使用默认选项
    levelProtectionOptions.value = [
      { label: '一级', value: '一级' },
      { label: '二级', value: '二级' },
      { label: '三级', value: '三级' },
      { label: '四级', value: '四级' }
    ]
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    // 准备提交数据
    const { useTime, ...otherFormData } = formData
    const submitData = {
      catalogId: route.params.id,
      ...otherFormData,
      useTimeStart: useTime[0],
      useTimeEnd: useTime[1],
      commitmentFile: formData.commitmentFile.id.toString(),
      applyFile: formData.applyFile.id.toString()
    }

    // 这里可以调用API提交表单数据
    await portalApi.submitApply(submitData)

    ElMessage.success('申请提交成功')
    emit('formSubmitted')
    // 关闭表单弹窗
    handleCloseForm()
  } catch (error) {
    ElMessage.error('请完善表单信息')
  }
}

// 保存表单
const handleSave = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    // 准备提交数据
    const { useTime, ...otherFormData } = formData
    const submitData = {
      catalogId: route.params.id,
      ...otherFormData,
      useTimeStart: useTime[0],
      useTimeEnd: useTime[1],
      commitmentFile: formData.commitmentFile.id.toString(),
      applyFile: formData.applyFile.id.toString()
    }

    // 这里可以调用API提交表单数据
    await portalApi.saveInterface(submitData)

    ElMessage.success('保存成功')

    // 关闭表单弹窗
    handleCloseForm()
  } catch (error) {
    ElMessage.error('请完善表单信息')
  }
}

// 暴露方法给父组件
defineExpose({
  openAgreement
})

onMounted(() => {
  getLevelProtectionOptions()
})

watch(
  () => formData.commitmentFile,
  (newValue) => {
    // 如果newValue是一个对象而不是字符串，说明传递的是完整文件信息
    if (typeof newValue === 'object' && newValue !== null) {
      formData.commitmentFile = newValue // 保存ID用于提交
    }
  },
  { deep: true }
)

watch(
  () => formData.applyFile,
  (newValue) => {
    // 如果newValue是一个对象而不是字符串，说明传递的是完整文件信息
    if (typeof newValue === 'object' && newValue !== null) {
      formData.applyFile = newValue // 保存ID用于提交
    }
  },
  { deep: true }
)
</script>

<style scoped lang="scss">
.agreement-content {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
  line-height: 1.8;
  font-size: 14px;
  color: #333;

  h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 16px;
    color: #17a7ff;
  }

  p {
    margin-bottom: 10px;
    text-align: justify;
  }

  // 自定义滚动条样式
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
